{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}用户注册{% endblock %}
{% block css %}
  <link rel="stylesheet" href="{% static 'css/account.css' %}">
  <style>
      .error-msg {
          color: red;
          position: absolute;
          font-size: 13px;
      }
  </style>
{% endblock %}
{% block content %}
  <div class="account">
    <div class="title">用户注册</div>
    <form id="regForm" method="POST" novalidate>
      {% csrf_token %}
      {% for field in form %}
        {% if field.name == 'code' %}
          <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            <div class="row">
              <div class="col-xs-7">
                {{ field }}
                <span class="error-msg"></span>
              </div>
              <div class="col-xs-5">
                <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码">
              </div>
            </div>
          </div>
        {% else %}
          <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            <span class="error-msg"></span>
          </div>
        {% endif %}
      {% endfor %}

      <div class="row">
        <div class="col-xs-3">
          <input id="btnSubmit" type="button" class="btn btn-primary" value="注  册"/>
        </div>
      </div>
    </form>
  </div>
{% endblock %}
{% block js %}
  <script>
      //页面框架加载完成之后自动执行函数
      $(function () {
          bindClickBtnSms();
      });

      /*
      点击获取验证码的按钮绑定事件
      */
      function bindClickBtnSms() {
          $('#btnSms').click(function () {
              // 获取用户输入的手机号
              // 找到输入框的ID，根据ID获取值，如何找到手机号的那个
              var mobilePhone = $('#id_mobile_phone').val();
              console.log('手机号为：' + mobilePhone)
              //发送ajax请求，把手机号发送过去
              $.ajax({
                  url: "{% url 'send_sms'%}",   //等价于 / send / sms /
                  type: 'GET',
                  data: {'mobilePhone': mobilePhone, tpl: "register"},
                  success: function (res) {
                      //ajax请求发送成功之后，自动执行的函数,res就是后端返回的值
                      console.log(res)
                  }
              })
          })
      }
  </script>
{% endblock %}